<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>校园失物管理系统 - 数据统计</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/style/admin.css" media="all">
	<style>
		.center-container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 20px;
		}
		.chart-row {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 20px;
		}
		.chart-card {
			width: 48%;
			box-sizing: border-box;
		}
		.chart-title {
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 15px;
		}
		.chart-container {
			width: 100%;
			height: 350px;
		}
		.version-card {
			margin-top: 20px;
		}
		@media (max-width: 768px) {
			.chart-card {
				width: 100%;
				margin-bottom: 20px;
			}
		}
	</style>
</head>
<body>

<div class="center-container">
	<!-- 图表行 -->
	<div class="chart-row">
		<!-- 用户性别统计 -->
		<div class="layui-card chart-card">
			<div class="layui-card-header">
				<div class="chart-title">用户性别统计</div>
			</div>
			<div class="layui-card-body">
				<div id="genderPieChart" class="chart-container"></div>
			</div>
		</div>

		<!-- 认领统计 -->
		<div class="layui-card chart-card">
			<div class="layui-card-header">
				<div class="chart-title">认领统计</div>
			</div>
			<div class="layui-card-body">
				<div id="claimPieChart" class="chart-container"></div>
			</div>
		</div>
	</div>

	<!-- 版本信息 -->
	<div class="layui-card version-card">
		<div class="layui-card-header">版本信息</div>
		<div class="layui-card-body layui-text">
			<table class="layui-table">
				<colgroup>
					<col width="100">
					<col>
				</colgroup>
				<tbody>
				<tr>
					<td>当前版本</td>
					<td>V1.0.0 校园失物管理系统</td>
				</tr>
				<tr>
					<td>基于框架</td>
					<td>
						前端框架：Layui，后端框架：SSM<br>
						开发语言：Java<br>
						源码作者：jm制作
					</td>
				</tr>
				<tr>
					<td>主要特色</td>
					<td>零门槛 / 响应式 / 清爽 / 极简</td>
				</tr>
				<tr>
					<td>获取渠道</td>
					<td style="padding-bottom: 0;">
						<div class="layui-btn-container">
							<a href="http://www.layui.com/admin/" target="_blank" class="layui-btn layui-btn-danger">获取授权</a>
							<a href="http://fly.layui.com/download/layuiAdmin/" target="_blank" class="layui-btn">立即下载</a>
						</div>
					</td>
				</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

<!-- 使用CDN引入确保稳定性 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="${pageContext.request.contextPath}/static/layuiadmin/layui/layui.js"></script>
<script>
	layui.config({
		base: '${pageContext.request.contextPath}/static/layuiadmin/'
	}).extend({
		index: 'lib/index'
	}).use(['index', 'jquery', 'layer'], function(){
		var $ = layui.$;
		var layer = layui.layer;

		// 初始化图表
		var genderPieChart = echarts.init(document.getElementById('genderPieChart'));
		var claimPieChart = echarts.init(document.getElementById('claimPieChart'));

		// 显示加载动画
		var loadingIndex = layer.load(1);

		// 加载用户性别数据
		$.get('${pageContext.request.contextPath}/user/data', function(userData){
			renderGenderChart(userData);

			// 加载认领统计数据
			$.get('${pageContext.request.contextPath}/goods/data', function(claimData){
				renderClaimChart(claimData);
				layer.close(loadingIndex);
			}).fail(function(){
				layer.close(loadingIndex);
				layer.msg('认领统计数据加载失败', {icon: 2});
			});

		}).fail(function(){
			layer.close(loadingIndex);
			layer.msg('用户性别数据加载失败', {icon: 2});
		});

		// 渲染性别统计图表
		function renderGenderChart(data) {
			var option = {
				title: {
					text: '用户性别比例',
					left: 'center',
					top: 10,
					textStyle: {
						fontSize: 16
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c}人 ({d}%)'
				},
				legend: {
					orient: 'horizontal',
					bottom: 10,
					data: data.map(item => item.name),
					textStyle: {
						fontSize: 12
					}
				},
				series: [{
					name: '性别比例',
					type: 'pie',
					radius: ['40%', '70%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: true,
						formatter: '{b}: {c}人 ({d}%)',
						fontSize: 12
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '14',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: true
					},
					data: data.map(item => ({
						value: item.counts,
						name: item.name
					}))
				}],
				color: ['#FF6B81', '#1E90FF']
			};
			genderPieChart.setOption(option);
		}

		// 渲染认领统计图表
		function renderClaimChart(data) {
			var option = {
				title: {
					text: '物品认领比例',
					left: 'center',
					top: 10,
					textStyle: {
						fontSize: 16
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c}件 ({d}%)'
				},
				legend: {
					orient: 'horizontal',
					bottom: 10,
					data: data.map(item => item.name),
					textStyle: {
						fontSize: 12
					}
				},
				series: [{
					name: '认领比例',
					type: 'pie',
					radius: ['40%', '70%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: true,
						formatter: '{b}: {c}件 ({d}%)',
						fontSize: 12
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '14',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: true
					},
					data: data.map(item => ({
						value: item.counts,
						name: item.name
					}))
				}],
				color: ['#FFA500', '#32CD32']
			};
			claimPieChart.setOption(option);
		}

		// 响应窗口大小变化
		window.addEventListener('resize', function() {
			genderPieChart.resize();
			claimPieChart.resize();
		});
	});
</script>
</body>
</html>